@primary-color: #ffffff;

.menu-hide {
    overflow: hidden;
    transition: all 0.2s ease;
}

.menu-show {
    overflow-y: auto;
    overflow-x: visible;
    transition: all 0.2s ease;
}

.menu-btn {
    display: flex;
    cursor: pointer;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    transition: all 0.2s;
    justify-content: flex-start;
    &:hover {
        color: @primary-color;
    }
    &::before {
        display: block;
        content: ">";
        transform: scaleX(0.5);
        transition: all 0.3s ease;
        margin-right: 2px;
        padding-right: 10px;
    }
    &.open {
        &::before {
            content: ">";
            transform: scaleY(0.5) rotate(90deg);
            transition: all 0.3s ease;
           
        }
    }
    &.empty {
        &::before {
            content: ">";
            opacity: 0;
        }
    }
    &>*:last-child {
        flex-grow: 1;
    }
}

.sider-menu-btn {
    &:active {
        background-color: lighten(spin(@primary-color, 10%), 45%);
    }
}

.menu-list {
    background-color: #fafafa;
    padding: 4px 0;
}
